<template>
  <div class="editCateDialog">
    <el-dialog title="编辑" :visible.sync="visible">
      <el-form
        :model="cateFrom"
        :rules="rules"
        ref="ruleForm"
        label-width="65px"
        label-position="right"
      >
        <el-form-item label="分类名" prop="cat_name">
          <el-input v-model="cateFrom.cat_name"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="editCate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editCategoryName } from "@/api/goods";

export default {
  name: "editCateDialog",
  data() {
    return {
      visible: false,
      cateFrom: {
        cat_id: null,
        cat_name: "",
      },
      rules: {
        cat_name: [
          { required: true, message: "分类名不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.$bus.$on("editCateVisible", (cat_id, cat_name) => {
      this.visible = true;
      this.cateFrom.cat_id = cat_id;
      this.cateFrom.cat_name = cat_name;
    });
  },
  methods: {
    editCate() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          editCategoryName(this.cateFrom.cat_id, this.cateFrom.cat_name).then(
            (res) => {
              this.$message.success("商品名称更改成功");
              this.visible = false;
              this.$bus.$emit("changeCateSuccess");
            },
            (err) => {
              this.$message.error("商品名称更改失败");
            }
          );
        }
      });
    },
  },
};
</script>

<style  scoped>
::v-deep .el-dialog__body {
  padding: 30px 20px 5px;
}
</style>
